<template>
    <view>
        <!-- 筛选抽屉效果 drawer -->
        <view>
            <uni-drawer :visible="showRight" mode="right" @close="closeDrawer('right')">
                <view class="drawer_wrap">
                    <view class="drawer_title">{{JobSkills.title}}</view>
                    <view class="jn_flex">
                        <view class="wrapflex">
                            <view class="wrapflexitem" v-for="(item,index) in JobSkills.itemlist" :key="index" :class="flexindex == index?'on':''" @click="changeitem(item,index)">
                                <text class="flexitemtxt">{{item}}</text>
                            </view>
                        </view>
                    </view>
                    <uni-collapse ref="add" class="warp">
                        <uni-collapse-item class="wrapitem" v-for="(item,index) in skillist" :key="index" :open="true" :show-animation="true" :title="item.title">
                            <view class="wrapflex">
                                <view class="wrapflexitem" v-for="(ite,inx) in item.list" :key="inx" :class="item.NO == ite.num?'on':''" @click="changeitemA(item,ite)">
                                    <text class="flexitemtxt">{{ite.txt}}</text>
                                </view>
                            </view>
                        </uni-collapse-item>
                    </uni-collapse>
                    <view class="close">
                        <view class="closeflex" @click="reset"><text>重置</text></view>
                        <view class="closeflex on" @click="closeDrawer"><text>确定</text></view>
                    </view>
                </view>
            </uni-drawer>
        </view>
        <!-- drawer -->
    </view>
</template>

<script>
    import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
    import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
    import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
    export default {
        props:{
            // sxshow:{
            //     type:Boolean,
            //     default:false
            // }
        },
        components: {
            uniDrawer,
            uniCollapse,
            uniCollapseItem,
        },
        data() {
            return {
                showRight: false,//是否显示抽屉
                flexindex: -1,//是否默认选中第一个，0为默认选中第一个
                parentval:{},//筛选8大类型传过来的值
                skillobj:{
                    skills0:'',//职位技能
                    skills1:'',//工作经验
                    skills2:'',//工作地址
                    skills3:'',//期望薪资
                    skills4:'',//职位技能
                    skills5:'',//工作经验
                    skills6:'',//工作地址
                    skills7:'',//期望薪资
                    skills8:'',//职位技能
                    skills9:'',//工作经验
                },//选中技能json
                JobSkills:{
                    title:'职位技能',
                    itemlist:['日常保洁','洗衣做饭','家有萌娃','照顾老人']
                },
                skillist:[
                    {
                        id:0,
                        title:'工作经验',
                        NO:-1,//是否默认选中第一个，0为默认选中第一个
                        list:[
                            {
                                txt:'一年',
                                num:0,
                            },
                            {
                                txt:'1～3年',
                                num:1,
                            },
                            {
                                txt:'3～5年',
                                num:2,
                            },
                            {
                                txt:'5年以上',
                                num:3,
                            }
                        ]
                    },
                    {
                        id:1,
                        title:'阿姨居住地址',
                        NO:-1,
                        list:[
                            {
                                txt:'鼓楼区',
                                num:0,
                            },
                            {
                                txt:'玄武区',
                                num:1,
                            },
                            {
                                txt:'建邺区',
                                num:2,
                            },
                            {
                                txt:'秦淮区',
                                num:3,
                            }
                        ]
                    },
                    {
                        id:2,
                        title:'期望薪资',
                        NO:-1,
                        list:[
                            {
                                txt:'3K以下',
                                num:0,
                            },
                            {
                                txt:'3K～5K',
                                num:1,
                            },
                            {
                                txt:'5K ~ 8k',
                                num:2,
                            },
                            {
                                txt:'8K以上',
                                num:3,
                            }
                        ]
                    },
                ],
            };
        },
        created() {
        },
        mounted() {
             // this.showRight = this.sxshow
             // console.log(this.sxshow)
        },
        methods: {
            // 点击筛选
            sxfilterfun(e) {
                console.log('点击头部筛选按钮',e)
                this.parentval = e;
                // 这里可以对skillist进行赋值
                this.showRight = true
                if(e.type>=1&&e.type<=8){
                    this.jsononly(e.type)
                }
            },
            // 请求8大类
           async jsononly(type){
                let res = await this.$request.post({
                    url: '/readJson/readEightJson',
                    skipInterceptorResponse: true,
                    business: undefined
                });
                // console.log(res);
                if (res && res.section) {
                    let job = res.section[type-1];//每个单项
                    this.JobSkills = {
                        title:job.items[0].title,
                        itemlist:job.items[0].options
                    }//第一项
                    // 于后几项
                    let yhobj = {
                        id:0,
                        title:'工作经验',
                        NO:-1,//是否默认选中第一个，0为默认选中第一个
                        list:[{txt:'一年',num:0,}]
                    }//单项大json
                    let yhlist = [] // 总数组
                    job.items.map((item,index)=>{
                        yhobj = {
                            id:0,
                            title:'工作经验',
                            NO:-1,//是否默认选中第一个，0为默认选中第一个
                            list:[{txt:'一年',num:0}]
                        }
                        if(index > 0){
                            yhobj.id = index - 1;
                            yhobj.title = item.title;
                            yhobj.NO = -1;
                            let listobj = {txt:'一年',num:0}
                            let plist = []
                            item.options.map((itv,inv)=>{
                                listobj = {txt:'一年',num:0}
                                listobj.num = inv;
                                listobj.txt = itv
                                plist.push(listobj)
                            })
                            yhobj.list = plist
                            yhlist.push(yhobj)
                        }
                    })
                    this.skillist = yhlist
                    console.log(job,yhlist);
                }
            },
            // 关闭抽屉
            closeDrawer(e) {
                console.log('点击关闭抽屉')
                this.showRight = false
                this.$emit('closeDrawer',Object.assign(this.skillobj,this.parentval))
            },
            // 重置
            reset(){
                this.flexindex = -1
                this.skillist.map((item,index)=>{
                    item.NO = -1
                })
                this.skillobj = {}
                console.log('点击重置');
                this.$emit('reset',this.parentval)
            },
            // 打开抽屉 item 选项 --职位技能
            changeitem(item,e) {
                this.flexindex = e
                this.skillobj.skills0 = item
            },
            // 打开抽屉 item 选项 --工作经验，工作地址，期望薪资
            changeitemA(item,ite) {
                item.NO = ite.num
                if(item.id == 0){
                    this.skillobj.skills1 = ite.txt //工作地址
                }
                if(item.id == 1){
                    this.skillobj.skills2 = ite.txt //工作地址
                }
                if(item.id == 2){
                    this.skillobj.skills3 = ite.txt //期望薪资
                }
                if(item.id == 3){
                    this.skillobj.skills4 = ite.txt //期望薪资
                }
                if(item.id == 4){
                    this.skillobj.skills5 = ite.txt //期望薪资
                }
                if(item.id == 5){
                    this.skillobj.skills6 = ite.txt //期望薪资
                }
                if(item.id == 6){
                    this.skillobj.skills7 = ite.txt //期望薪资
                }
                if(item.id == 7){
                    this.skillobj.skills8 = ite.txt //期望薪资
                }
                if(item.id == 8){
                    this.skillobj.skills9 = ite.txt //期望薪资
                }
                // console.log(item,ite)
                console.log(this.skillobj)
            },
        },
        watch:{
            // showRight:{
            //     handler(oldval,newval){
            //         console.log(oldval,newval)
            //         this.showRight = oldval
            //     },
            //     deep:true
            // }
        }
    };
</script>

<style lang="scss">
    .drawer_wrap {
        padding: 30rpx 0 100rpx 0;
        overflow-y: auto;
        height: 100%;
        position: relative;
        .close {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #eeeeee;
            background: #FFFFFF;
            height: 100rpx;
            z-index: 1;
            .closeflex {
                border: 1px solid rgba(34, 34, 34, 1);
                border-radius: 10rpx;
                color: #000000;
                font-size: 24rpx;
                text-align: center;
                height: 60rpx;
                line-height: 60rpx;

                text {
                    width: 100%;
                    display: inline-block;
                    width: 200rpx;
                }

                &.on {
                    background: linear-gradient(0deg, rgba(255, 103, 43, 1), rgba(252, 118, 59, 1));
                    color: #FFFFFF;
                    border: 1px solid rgba(255, 103, 43, 1);
                }
            }
        }

        .drawer_title {
            font-size: 28rpx;
            color: #000000;
            padding: 0 24rpx;
            margin-bottom: 20rpx;
        }

        .jn_flex {
            border-bottom: 20rpx solid #F7F7F7;
        }

        .wrapitem {
            background: #FFFFFF !important;
            border-bottom: none;
        }

        .wrapflex {
            display: flex;
            flex-wrap: wrap;
            padding: 0 24rpx 0 14rpx;

            .wrapflexitem {
                flex: 0 0 33.33%;
                text-align: center;
                font-size: 24rpx;
                margin-bottom: 20rpx;

                &.on {
                    .flexitemtxt {
                        color: #FF5400;
                        background: rgba(255, 102, 0, 0.23);
                    }
                }

                .flexitemtxt {
                    color: #000000;
                    background: #EEEEEE;
                    display: block;
                    height: 50rpx;
                    line-height: 50rpx;
                    word-break: break-all;
                    border-radius: 4rpx;
                    margin: 0 10rpx;
                    @include text-ellipsis();
                }
            }
        }
    }
</style>
